import { useEffect } from "react"
import { useSecondKill } from "../../hook/secondKill"
import {  Table, Card,  Breadcrumb, Select,Image } from 'antd';
import _ from "lodash";


//eslint-disable-next-line
export default () => {

    //数据请求
    // const [{ rows, total }, { getComms, setCurPage, setEachPage }] = useComms()
    const [{ rows, total }, { getSecondKill, setCurPage, setEachPage }] = useSecondKill()

    useEffect(() => {
        getSecondKill()
    }, [getSecondKill])
    console.log(rows);

    const options = _.map(rows, item => {
        return {
            _id:item._id,
            CommId:item.CommId._id,
            name: item.CommId.name,
            count: item.CommId.count,
            price: item.CommId.price,
            limit: item.limit,
            time: `${item.Time[0]}-${item.Time[1]}`,
            sale: Number((item.Sale * item.CommId.price).toFixed(2)),
            poster:item.CommId.poster[0]
        }

    })

    //设置table数据
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '图片',
            dataIndex: 'poster',
            key: 'poster',
            render: record => {
                return <Image width={50} src={`http://localhost:3002${record}`} />;
            },
        },
        {
            title: '库存',
            dataIndex: 'count',
            key: "count",
        },
        {
            title: '原价',
            dataIndex: 'price',
            key: "price",
        },
        {
            title: '折后价格',
            dataIndex: 'sale',
            key: "sale",
        },
        {
            title: '限购数量',
            dataIndex: 'limit',
            key: "limit",
        },
        {
            title: '促销时间',
            dataIndex: 'time',
            key: 'time',
        }
    ];

    //select 依赖
    const { Option } = Select;


    //返回jsx对象
    return (
        <div style={{ margin: "30px" }}>
            <Card>
                <Card>
                    <Breadcrumb>
                        <Breadcrumb.Item>主页</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href=""> 秒杀商品</a>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">秒杀商品列表</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </Card>
            </Card>



            <Card direction="vertical" style={{ width: "100%" }}>
                <Table rowKey={record => record._id} dataSource={options} columns={columns}
                    pagination={{
                        total, onChange: (page, pageSize) => {
                            setCurPage(page)
                            setEachPage(pageSize)
                        }
                    }} />
            </Card>

        </div>
    )
}

